<template>
  <!-- 字典数据项编辑弹窗 -->
  <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑字典数据项' : '新增字典数据项'" width="500px" class="base-dialog">
    <el-form ref="dictDataItemFormRef" :model="dictDataItemForm" :rules="rules" label-width="80px">
      <!-- 字典类型 -->
      <el-form-item label="字典类型" prop="type">
        <el-input v-model="dictDataItemForm.type" disabled placeholder="请输入字典类型" clearable />
      </el-form-item>

      <!-- 数据标签 -->
      <el-form-item label="数据标签" prop="label">
        <el-input v-model="dictDataItemForm.label" placeholder="请输入数据标签" clearable />
      </el-form-item>

      <!-- 数据键值 -->
      <el-form-item label="数据键值" prop="value">
        <el-input v-model="dictDataItemForm.value" placeholder="请输入数据键值" clearable />
      </el-form-item>

      <!-- 显示排序 -->
      <el-form-item label="显示排序" prop="orderNo">
        <el-input-number v-model="dictDataItemForm.orderNo" :min="0" :max="999" controls-position="right" />
      </el-form-item>

      <!-- 状态 -->
      <el-form-item label="状态" prop="status">
        <el-switch v-model="dictDataItemForm.status" active-text="启用" inactive-text="停用" inline-prompt />
      </el-form-item>

      <!-- 备注 -->
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dictDataItemForm.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>

    <!-- 弹窗底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { useDictApi } from '@/api/dict-api.js';

  const dictApi = useDictApi();

  // 定义组件属性
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    currentDict: {
      type: Object,
      default: null,
    },
    editingDictData: {
      type: Object,
      default: null,
    },
  });

  // 定义组件事件
  const emit = defineEmits(['update:modelValue', 'success']);

  // 表单引用
  const dictDataItemFormRef = ref(null);

  // 弹窗显示状态
  const dialogVisible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val),
  });

  // 是否为编辑模式
  const isEdit = computed(() => props.editingDictData !== null);

  // 表单数据
  const dictDataItemForm = ref({
    dictId: props.currentDict?.dictId,
    type: props.currentDict?.type,
    label: '',
    value: '',
    status: true,
    orderNo: 0,
    remark: '',
  });

  // 表单验证规则
  const rules = {
    label: [{ required: true, message: '请输入数据标签', trigger: 'blur' }],
    value: [{ required: true, message: '请输入数据键值', trigger: 'blur' }],
  };

  // 监听字典数据项变化，更新表单数据
  watch(
    () => props.editingDictData,
    (newVal) => {
      if (newVal) {
        dictDataItemForm.value = { ...newVal };
      }
    }
  );

  watch(
    () => props.currentDict,
    (newVal) => {
      if (newVal) {
        dictDataItemForm.value = {
          dictId: newVal.dictId,
          type: newVal.type,
          label: '',
          value: '',
          status: true,
          orderNo: 0,
          remark: '',
        };
      }
    }
  );

  // 提交表单
  const handleSubmit = async () => {
    try {
      await dictDataItemFormRef.value.validate();

      const data = { ...dictDataItemForm.value };
      let res;

      if (isEdit.value) {
        res = await dictApi.updateDictData(data);
      } else {
        res = await dictApi.addDictData(data);
      }

      ElMessage.success(res.message || (isEdit.value ? '更新成功' : '新增成功'));
      emit('success');
      dialogVisible.value = false;
    } catch (error) {
      if (error.message) {
        ElMessage.error(isEdit.value ? '更新失败: ' : '新增失败: ' + error.message);
      }
    }
  };
</script>
@/api/dict-api